import React, { useState, useRef, useEffect } from 'react'
import { useModel } from '@umijs/max'
import { ProTable } from '@ant-design/pro-components'
import { App, Button, Popconfirm, Space } from 'antd'

export default () => {
  const { GetShopSelections } = useModel('Goods')
  const { GetRechargeAuditList, CheckChart } = useModel('RechargeAudit')
  const [shopList, setShopList] = useState([])
  const { message } = App.useApp()
  const [pageSize, setPageSize] = useState(10) //  每页数量
  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const tableRef = useRef()

  // 审核
  const handleSetStatus = async (row, type) => {
    const res = await CheckChart({
      id: row.id,
      pay_status: type
    })
    if (res) {
      tableRef.current.reload()
      message.success('操作成功')
    }
  }

  useEffect(() => {
    getShopList()
  }, [])

  //  获取店铺列表
  const getShopList = async () => {
    const res = await GetShopSelections()

    setShopList(res.map(i => [i.id, i.shop_name]))
  }

  const originColumns = [
    {
      title: '店铺',
      dataIndex: 'shop_name',
      hideInSearch: true,
    },
    {
      title: '充值金额(元)',
      hideInSearch: true,
      dataIndex: 'total_amount'
    },
    {
      title: '充值时间',
      hideInSearch: true,
      dataIndex: 'created_at'
    },
    {
      title: '备注',
      hideInSearch: true,
      dataIndex: 'subject'
    },
    {
      title: '状态',
      hideInSearch: true,
      dataIndex: 'pay_status',
      align: 'center',
      valueEnum: {
        1: {
          text: '待审核',
          status: 'Processing'
        },
        2: {
          text: '通过',
          status: 'Success'
        },
        3: {
          text: '拒绝',
          status: 'Error'
        },
        4: {
          text: '拒绝',
          status: 'Error'
        }
      }
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 200,
      render: (_, row) => {
        return (
          row.pay_status === 1 && (
            <Space>
              <Popconfirm title='确定通过吗?' onConfirm={() => handleSetStatus(row, 2)}>
                <Button type='primary'>通过</Button>
              </Popconfirm>
              <Popconfirm title='确定拒绝吗?' onConfirm={() => handleSetStatus(row, 4)}>
                <Button type='primary' danger>
                  拒绝
                </Button>
              </Popconfirm>
            </Space>
          )
        )
      }
    },

    // search
    {
      title: '归属店铺',
      dataIndex: 'merchant_id',
      hideInTable: true,
      width: 180,
      valueType: 'select',
      valueEnum: new Map(shopList)
    },
  ]

  return (
    <ProTable
      actionRef={tableRef}
      request={async params => {
        const param = {
          page: params.current,
          page_size: params.pageSize,
          merchant_id: params.merchant_id
        }

        setCurrentPage(params.current)
        setPageSize(params.pageSize)

        const res = await GetRechargeAuditList(param)
        return {
          data: res.data,
          success: true,
          total: res.total
        }
      }}
      pagination={{
        pageSize: pageSize,
        current: currentPage,
        showSizeChanger: true
      }}
      headerTitle={false}
      scroll={{ x: 'max-content' }}
      rowKey='id'
      columns={originColumns}
      search={{
        defaultCollapsed: false,
        labelWidth: 75,
        span: 6
      }}
    />
  )
}
